<template>
  <div class="one-page">
    <div class="content">
      <img @click="closeScreen" class="close-screen" src="../../../assets/bigDataSourceImage/close.png">
      <!-- <h2>立码停车运营平台数据系统</h2> -->
      <h2>石家庄市静态交通数字化管理平台</h2>
      <div class="upper">
        <div class="left" style="font-size: 10px;">
          <areaMap @toPage="toPage"/>
        </div>
        <div class="right">
          <div style="height: 50%;font-size: 10px;">
            <overView/>
          </div>
          <div style="height: 50%;font-size: 10px;">
            <dataSummary/>
          </div>
        </div>
      </div>
      <div class="lower">
        <div class="dynamic" style="font-size: 10px;">
          <carInOut/>
        </div>
        <div class="pie" style="font-size: 10px;">
          <typeProportion/>
        </div>
        <div class="pie" style="font-size: 10px;">
          <inTimeProportion/>
        </div>
        <div class="pie" style="font-size: 10px;">
          <marktProportion/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import overView from './components/overView.vue'
  import dataSummary from './components/dataSummary.vue'
  import carInOut from './components/carInOut.vue'
  import typeProportion from './components/typeProportion.vue'
  import inTimeProportion from './components/inTimeProportion.vue'
  import marktProportion from './components/marktProportion.vue'
  import areaMap from './components/areaMap.vue'

  export default {
    name: 'big-data-screen',
    components: {
      overView,
      dataSummary,
      carInOut,
      typeProportion,
      inTimeProportion,
      marktProportion,
      areaMap
    },
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {
      toPage() {
        this.$emit('swithPage',false)
      },
      closeScreen() {
        this.$router.push({path:'/'});
      }
    }
  }
</script>

<style scoped>
  html {
    font-size: 10px;
  }
  p {
    margin: 0;
  }
  .one-page {
    height: 100%;
    padding-top: 28px;
  }
  .content {
    width: 94.95%;
    max-width: 1823px;
    height: 93.7%;
    max-height: 1012px;
    margin: 0 auto;
    background-image: url('../../../assets/bigDataSourceImage/header.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
  }
  h2 {
    color: #fff;
    text-align: center;
    /* font-size: 3.6rem; */
    font-size: 3rem;
    margin: 0;
    letter-spacing: 2px;
    /* background-color: red; */
  }
  .close-screen {
    width: 2.6rem;
    position: absolute;
    top: 0;
    right: 0;
  }
  .upper {
    margin-top: 38px;
    height: 60.57%;
  }
  .upper::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .left {
    width: 60%;
    display: inline-block;
    height: 100%;
  }
 .right {
    width: 39.5%;
    height: 100%;
    float: right;
  }
  .lower {
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
    height: 27.67%;
  }
  .dynamic {
    display: inline-block;
    width: 29.13%;
    height: 100%;
  }
  .pie {
    display: inline-block;
    width: 22.44%;
    height: 100%;
    /* border: 1px solid transparent;
    border-image-source: url('../../../assets/bigDataSourceImage/box1.png');
    border-image-slice: 26 26 26 26;
    border-image-repeat: stretch;
    border-image-width: 26px;
    box-sizing: border-box; */
  }

</style>
